<!-- 词性词频分析(词汇分龄详细分析) -->
<template>
  <div class="w-full statistical-center">
    <statisticalHeader />
    <div class="px-40px mt--9px ml--6px flex flex-1 gap-10px flex-col">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-12px text-28px fw-700">
          <div class="flex items-center">
            <el-date-picker
              popper-class="popper-date-class"
              v-model="queryDate"
              type="daterange"
              placeholder="请选择日期"
              value-format="YYYYMMDD"
              :clearable="false"
            />
          </div>
          <ClassStudentCascader
            :cascaderProps="{ checkStrictly: false }"
            :clearable="false"
            autoDefaultValue
            @change="cascaderChange"
          />
        </div>
        <div>
          <aiGenerateReport :sendContent="sendContent" :roleId="52" />
        </div>
      </div>
      <el-scrollbar
        ref="echartWarpRef"
        class="statistical-center-content"
        view-class="pb-60px flex gap-20px flex-wrap"
        v-loading="loading"
      >
        <template v-if="pageData && Object.keys(pageData)?.length">
          <div class="echart-card min-w-445px" v-for="(item, key) in pageData" :key="key">
            <Echart
              :notMerge="false"
              :width="getViewportPx(445)"
              :height="getViewportPx(338)"
              :options="
                useWordCloudOptions(
                  item?.map((wordItem) => ({
                    name: wordItem?.word?.toString?.() || '',
                    value: wordItem.count
                  })),
                  {
                    title: {
                      text: `${getDictLabel(DICT_TYPE.POS_CATEGORY_TO_CHINESE, key)}词频分布`,
                      left: 'center'
                    }
                  }
                ).baseOptions
              "
            />
          </div>
        </template>
        <template v-else>
          <div class="flex-1 flex items-center justify-center">
            <el-empty description="暂无数据" />
          </div>
        </template>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getDictLabel, DICT_TYPE } from '@/utils/dict'
import { getViewportPx } from '@/utils/formatter'
import { statisticalCenterApi } from '@/api/school/statisticalCenter/index'
import { useWordCloudOptions } from '@/hooks/chart/useWordCloudOptions'
import statisticalHeader from './components/statisticalHeader.vue'
import aiGenerateReport from './components/aiGenerateReport.vue'
import { formatDate } from '@/utils/formatTime'

const pageData: any = ref({})
const loading = ref(true)
const cascaderParams: any = ref({})
const pathLabels = ref([])
const nowDateStr = formatDate(new Date(), 'YYYYMMDD')
const queryDate = ref([nowDateStr, nowDateStr])
const queryParams = computed(() => {
  return {
    startTime: queryDate.value[0],
    endTime: queryDate.value[1],
    studentId: cascaderParams.value.studentId
  }
})

// 发送内容
const sendContent = computed(() => {
  const baseData = {
    startTime: queryParams.value.startTime,
    endTime: queryParams.value.endTime,
    type: pathLabels.value.length - 1,
    target: pathLabels.value.join('-'),
    data: pageData.value
  }
  return baseData
})

const init = async () => {
  if (!queryParams.value?.studentId) {
    return
  }
  try {
    loading.value = true
    const res = await statisticalCenterApi.getPosWordFreqReport(queryParams.value)
    pageData.value = res.posWordFreqGroups || {}
  } catch (error) {
    console.error(error)
    pageData.value = {}
  } finally {
    loading.value = false
  }
}
const cascaderChange = async (params, cascaderPathLabels) => {
  cascaderParams.value = params
  pathLabels.value = cascaderPathLabels
}

watch(
  () => queryParams.value,
  () => {
    init()
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
@import url('./index.scss');

.echart-card {
  padding: 15px 0;
}
</style>
